<template>
  <div id="order" class="main-box">
    <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 15px" @click="goAdd">
      {{ $t('添加') }}
    </el-button>
    <BaseTable :request="request">
      <el-table-column label="ID" prop="id" width="60px" />
      <el-table-column :label="$t('模型名称')" prop="title" />
      <el-table-column :label="$t('表名')" prop="table" />
      <el-table-column :label="$t('附表')" prop="database_table" />
      <el-table-column :label="$t('模型类型')" prop="type">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">{{ $t('独立模型') }}</span>
          <span v-if="scope.row.type == 2">{{ $t('主表附表模型') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('系统模型')">
        <template slot-scope="scope">
          <span v-if="scope.row.is_system==1">是</span>
          <span v-if="scope.row.is_system==2">否</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column :label="$t('描述')" prop="description" /> -->
      <el-table-column :label="$t('状态')" width="180px">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :active-text="$t('正常')"
            :inactive-text="$t('禁用')" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)"
            @change="disableUser(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" width="150px" fixed="right" align="right">
        <template slot-scope="scope">
          <CheckBtn :tips-content="$t('查看模型字段')" @click="check(scope.row)" />
          <EditBtn @click="editor(scope.row)" />
          <DelBtn @success="del(scope.row)" :confirm-content="$t('永久删除该模型')" />
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog :title="id ? $t('编辑') : $t('添加')" :dialog-show.sync="dialogShow" width="50%" footer @submit="submit">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-position="top">
        <el-form-item :label="$t('名称')" prop="title">
          <el-input v-model="addForm.title" />
        </el-form-item>
        <el-form-item :label="$t('表名')" prop="table">
          <el-input v-model="addForm.table" :disabled="id ? true : false" :placeholder="$t('表名由字母和下划线组成')" />
        </el-form-item>
        <el-form-item :label="$t('模型类型')" prop="type">
          <el-select v-model="addForm.type">
            <el-option :label="$t('独立模型')" :value="1" disabled />
            <el-option :label="$t('主表附表模型')" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('描述')" prop="description">
          <el-input v-model="addForm.description" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <!-- <el-form-item :label="$t('附表')" prop="database_table">
          <el-input v-model="addForm.database_table" />
        </el-form-item> -->
        <!-- <el-form-item :label="$t('系统模型')">
          <el-select v-model="addForm.is_system">
            <el-option :label="$t('是')" :value="1" />
            <el-option :label="$t('否')" :value="2" />
          </el-select>
        </el-form-item> -->
        <el-form-item :label="$t('状态')">
          <el-select v-model="addForm.status">
            <el-option :label="$t('正常')" :value="1" />
            <el-option :label="$t('禁用')" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import moduleApi from '@/api/module.js'
export default {
  data() {
    return {
      request: moduleApi.moduleList,
      dialogShow: false,
      addForm: {
        title: '',
        table: '',
        database_table: '',
        description: '',
        type: 2,
        status: ''
      },
      rules: {
        title: [
          {
            required: 'true',
            message: this.$t('请输入模型名'),
            trigger: 'blur'
          }
        ],
        table: [
          { required: 'true', message: this.$t('请输入表名'), trigger: 'blur' }
        ],
        description: [
          {
            required: 'true',
            message: this.$t('请输入模型描述'),
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: 'true',
            message: this.$t('请选择模型类型'),
            trigger: 'change'
          }
        ]
      },
      id: ''
    }
  },

  methods: {
    disableUser(row) {
      const val = {
        title: row.title,
        table: row.table,
        database_table: row.database_table,
        description: row.description,
        type: row.type,
        // is_system: row.is_system,
        id: row.id,
        status: ''
      }
      if (row.status == 1) {
        val.status = 1
      } else {
        val.status = 2
      }

      moduleApi.moduleUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    // 新增
    goAdd() {
      this.id = ''
      this.addForm = {}
      this.addForm.status = 1
      this.addForm.type = 2
      this.dialogShow = true
    },
    // 编辑
    editor(row) {
      this.id = row.id
      this.addForm = row
      this.dialogShow = true
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            moduleApi.moduleSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.$refs.baseTable.getList('search')
              }
            })
          } else {
            moduleApi.moduleUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.$refs.baseTable.getList('search')
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 查看模型字段列表
    check(row) {
      this.$router.push({ name: 'modelField', query: { id: row.id } })
    },
    // 删除
    del(row) {
      moduleApi.moduleDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.$refs.baseTable.getList()
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-form--label-top {
  .el-select {
    width: 100%;
  }
}

.el-table {
  margin-bottom: 20px;
}

.search {
  min-width: 1350px;
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
}

.el-form-item {
  width: 100%;
}
</style>
